<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>添加车辆</title>
    <link rel="stylesheet" type="text/css" href="config/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="config/css/base.css">
    <link rel="stylesheet" type="text/css" href="config/css/common.css">
    <link rel="stylesheet" type="text/css" href="css/page.css">
</head>
<body class="bgcolor">
    <section>
      <div class="car-select-pai">
          <div class="car-sheng">
              <div class="car-sheng-l">车牌</div>
              <div class="car-sheng-r"><a class="f16">浙</a><img src="image/xia-more.png"></div>
          </div>
          <div class="car-zimu f14">
              <a class="pl5">A</a><img src="image/xia-more.png">
          </div>
          <div class="car-number graycolor f14 pl5"><a class="pl5">填写车牌号</a></div>
          <div class="cb"></div>
      </div>
      <div class="car-select-type">
          <div class="car-xi-l f14">车系</div>
          <div class="car-xi-r">
              <span class="graycolor pr5 f14">请选择车系</span><img src="image/more.png" class="car-xi-imgsty">
          </div>
      </div>
      <div class="sure-addcar-div">
          <input type="button" value="保 存" class="blurbgcolor whitecolor f14"/>
      </div>
    </section>
  <!--字母选择页面-->
  <div class="car-province-alphabet" style="display: none">
      <ul>
          <li>A</li>
          <li>B</li>
          <li>C</li>
          <li>D</li>
          <li>E</li>
          <li>F</li>
          <li>J</li>
          <li>H</li>
          <li>I</li>
          <li>J</li>
          <li>K</li>
          <li>L</li>
          <li>M</li>
          <li>N</li>
          <li>O</li>
          <li>P</li>
          <li>Q</li>
          <li>R</li>
          <li>S</li>
          <li>T</li>
          <li>U</li>
          <li>V</li>
          <li>W</li>
          <li>X</li>
          <li>Y</li>
          <li>Z</li>
      </ul>
  </div>

<!--省会简称选择页面-->
  <div class="car-province-box" style="display: none">
      <ul>
          <li>京</li>
          <li>津</li>
          <li>冀</li>
          <li>晋</li>
          <li>蒙</li>
          <li>辽</li>
          <li>吉</li>
          <li>黑</li>
          <li>沪</li>
          <li>苏</li>
          <li>浙</li>
          <li>皖</li>
          <li>闽</li>
          <li>赣</li>
          <li>鲁</li>
          <li>豫</li>
          <li>鄂</li>
          <li>湘</li>
          <li>粤</li>
          <li>桂</li>
          <li>琼</li>
          <li>川</li>
          <li>贵</li>
          <li>云</li>
          <li>渝</li>
          <li>藏</li>
          <li>陕</li>
          <li>甘</li>
          <li>青</li>
          <li>宁</li>
          <li>新</li>
      </ul>
  </div>

<!--车牌号填写-->
<div class="car-number-keyboard" style="display: none">
    <button>完成</button>
    <div style="clear: both"></div>
    <ul class="chinese-keyboard">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>0</li>
    </ul>
    <ul class="english-keyboard">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>J</li>
        <li>H</li>
        <li>I</li>
        <li>J</li>
        <li>K</li>
        <li>L</li>
        <li>M</li>
        <li>N</li>
        <li>O</li>
        <li>P</li>
        <li>Q</li>
        <li>R</li>
        <li>S</li>
        <li>T</li>
        <li>U</li>
        <li>V</li>
        <li>W</li>
        <li>X</li>
        <li>Y</li>
        <li>Z</li>
    </ul>
</div>

<!--选择车品牌-->
<div class="choose-carbrand" style="display: none">
    <div id="letter" ></div>
    <div class="sort_box">
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">奥迪</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">AC Schnitzer</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">Artega</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">奔驰</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">宝马</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">保时捷</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">宝沃</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">巴博斯</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">大众</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">卡尔森</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">阿尔特</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">本田</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">丰田</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">雷克萨斯</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">铃木</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">朗世</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">马自达</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">讴歌</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">日产</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">三菱</div>
        </div>

        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">斯巴鲁</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">别克</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">道奇</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">福特</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">GMC</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">凯迪拉克</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">Jeep</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">雪佛兰</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">特斯拉</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">林肯</div>
        </div>
        <div class="sort_list">
            <div class="num_logo">
                <img src="image/logo.png" alt="">
            </div>
            <div class="num_name">++</div>
        </div>
    </div>
    <div class="initials">
        <ul>
            <li><img src="image/0681.png"></li>
        </ul>
    </div>
</div>
</body>
<script src="config/js/jquery.min.js" ></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="config/js/jquery.charfirst.pinyin.js"></script>
<script src="js/sort.js"></script>
<script>
    $(function () {
//保存车辆信息
        $(".sure-addcar-div").click(function () {
            var shengword = $('.car-sheng-r a').html();
            var englishword = $('.car-zimu a').html();
            var carnumberword = $('.car-number a').html();
            var carbrandword = $('.car-xi-r span').html();
            window.location.href = 'index.html';//跳转至下单页
        });

//填写省会信息
        $(".car-sheng-r").click(function () {
            $('.choose-carbrand').hide();//车品牌选择框隐藏
            $('.car-province-alphabet').hide();//车辆字母选择框隐藏
            $('.car-number-keyboard').hide();//车牌号选择列表隐藏
            $('.car-province-box').show();//省会简称选择框显示
        });
        $('.car-province-box ul li').click(function () {
            $('.car-province-box').hide();//省会简称选择框隐藏
            $('.car-sheng-r a').html($(this).html());//将选中的省会简称填入输入框
        });

//填写字母信息
        $(".car-zimu").click(function () {
            $('.choose-carbrand').hide();//车品牌选择框隐藏
            $('.car-number-keyboard').hide();//车牌号选择列表隐藏
            $('.car-province-box').hide();//省会简称选择框隐藏
            $('.car-province-alphabet').show();//字母选择列表显示
        });
        $('.car-province-alphabet ul li').click(function () {
            $('.car-province-alphabet').hide();//字母选择列表隐藏
            $('.car-zimu a').html($(this).html());//将选中的字母填入输入框
        });

//填写车牌号
        $(".car-number").click(function () {
            $('.choose-carbrand').hide();//车品牌选择框隐藏
            $('.car-province-box').hide();//省会简称选择框隐藏
            $('.car-province-alphabet').hide();//字母选择列表隐藏
            $('.car-number a').html('');
            $('.car-number-keyboard').show();//车牌号选择列表显示
        });
        $('.car-number-keyboard ul li').click(function () {
            var oldnumber = $('.car-number a').html();
            $('.car-number a').html(oldnumber + $(this).html());//将选中的文字填入输入框
        });
        $(".car-number-keyboard button").click(function () {
            $('.car-number-keyboard').hide();//字母选择列表隐藏
        });

//车品牌选择
        $('.car-xi-r').click(function () {
            $('section').hide();
            $('.car-number-keyboard').hide();//车牌号选择列表隐藏
            $('.car-province-box').hide();//省会简称选择框隐藏
            $('.car-province-alphabet').hide();//字母选择列表隐藏
            $('.choose-carbrand').show();//车牌号选择框显示
        });
        $('.sort_list').click(function () {
            var carbrand = $(this).children('.num_name').html();
            $('.car-xi-r span').html(carbrand);//将选中的品牌填入输入框
            $('section').show();
            $('.choose-carbrand').hide();//车牌号选择框隐藏
        });
    })
</script>
</html>